<template>
    <div class="form-container">
        <a-form
        :model="formState"
        name="basic"
        class="centered-form"
        :label-col="{ span: 24 }"
        :wrapper-col="{ span: 20 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
        >
        <a-form-item
            label="用户名"
            name="mobile"
            :rules="[{ required: true, message: 'Please input your username!' }]"
        >
            <a-input v-model:value="formState.mobile" />
        </a-form-item>
    
        <a-form-item
            label="密码"
            name="password"
            :rules="[{ required: true, message: 'Please input your password!' }]"
        >
            <a-input-password v-model:value="formState.password" />
        </a-form-item>
    
        <a-form-item name="remember" :wrapper-col="{ offset: 16, span: 24 }">
            <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 16, span: 24 }">
            <div class="form-actions">
                <a-button type="link" @click="goToRegister">注册管理员</a-button>
            </div>
        </a-form-item>
    
        <a-form-item :wrapper-col="{ offset: 8, span: 24 }">
            <a-button type="primary" html-type="submit">登录</a-button>
        </a-form-item>
        </a-form>
    </div>
  </template>
  <script setup>
  import axios from 'axios';
  import { message } from 'ant-design-vue';
  import { reactive } from 'vue';
  import "../../css/example.css";
  import { useRouter } from 'vue-router';
  import { 
  Form, 
  FormItem, 
  Input, 
  InputPassword, 
  Checkbox, 
  Button 
} from 'ant-design-vue';
const router = useRouter();
const AForm = Form;
const AFormItem = FormItem;
const AInput = Input;
const AInputPassword = InputPassword;
const ACheckbox = Checkbox;
const AButton = Button;
  const formState = reactive({
    mobile: '',
    password: '',
  });
  const onFinish = async () => {
    try {
        const response = await axios.post('/admin/login', {
            mobile: formState.mobile,
            password: formState.password
        });
        
        // 保存token
        localStorage.setItem('admin_token', response.data.access_token);
        // message.success('管理员登录成功');
        
        // 跳转到管理后台
        // window.location.href = '/admin/dashboard';
        router.push('/admin/addbilltype');
    } catch (error) {
        message.error(error || '登录失败');
    }
  };
  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };
  const goToRegister = () => {
  router.push('/admin/register');
};
  </script>